$.ajax({
    url:'../server/list.php',
    dataType:'json',
    success(res){
      // 结构数据
      let {data} = res;
      // layui分页组件
      // 引入了layui之后使用use方法导入laypage
    layui.use(['laypage'], function(){
      let laypage = layui.laypage;              
      //调用分页
      laypage.render({
        elem: 'page', // 在页面中渲染分页组件的标签id
        count: data.length, // 总数据的条数
        // count:数据总条数显示 prev:上一页  next:下一页
        layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
        limits:[4,8,12],
        limit:4,
        first:'首页',
        last:'尾页',
        groups:6,
        jump: function(obj){ // 页码跳转函数        
          let str = function(){ // 自调用函数执行,返回一个拼接好的html字符串
            var thisData = data.concat().splice((obj.curr -1)*obj.limit, obj.limit);          
            var arr = thisData.map(v=>`
            <li class="items">
                            <a href="#">
                                <img src="${v.imgpath.split('==========')[0]}" alt="" class="img1">
                                <p class="name2">${v.name}</p>
                                <p class="desc2">${v.introduce}</p>
                                <p class="price2">${v.price}
                                    <del>1699元</del>
                                </p>
                            </a>
                        </li>
            `);
            return arr.join('');
          }();
          //渲染
          $('#list').html(str);
          // 关闭弹出层
          layer.close(index);
        }
      });     
    });
    }
  })